<template>
	<div class="fx-list-state-tag">
		<span class="fx-list-state-tag__dot" :class="iconClasses"></span>
		<span class="fx-list-state-tag__label">{{label}}</span>
	</div>
</template>
<script>
export default {
	name: 'fx-list-state-tag',
	props: {
		icon: String,
		label: String
	},
	computed: {
		iconClasses () {
			return [`dot-${this.icon}`]
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.fx-list-state-tag {
	display: flex;
	flex-direction: row;
	align-items: center;
	&__dot {
		width: 8px
		height: 8px
		border-radius: 50%
		margin-right: 10px
		&.dot-red {
			background-color: $fxRed2
		}
		&.dot-green {
			background-color: $fxGreen2
		}
		&.dot-gray {
			background-color: $fxGray3
		}
	}
}
</style>

